<template>
<div>
  <div class="container-top">
    <div class="ac-head" style="width:100%">
      <div class="icon-menu-open" @click="openMenu(isCollapse)">
        <div v-if="!isCollapse">
          <el-icon><Fold /></el-icon>
        </div>
        <div v-if="isCollapse">
          <el-icon><Expand /></el-icon>
        </div>
      </div>
      <div class="ac-home-text">
        <!-- <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>promotion management</el-breadcrumb-item>
          <el-breadcrumb-item>promotion list</el-breadcrumb-item>
          <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
        </el-breadcrumb> -->
       
    <!-- <hamburger @toggle-click="handle_toggle" :is-active="is_active"></hamburger>  -->
    <!-- 面包屑 -->
       <Breadcrumb/>
    
      </div>
      <div class="ac-setting">
        <div class="ac-setting-comm">
          <el-dropdown @command="handleCommand" :size="large">
            <div class="ac-avatar">
              <el-icon class=""><Avatar /></el-icon
              ><el-icon class="el-icon--right"><arrow-down /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">主题设置</el-dropdown-item>
                <el-dropdown-item command="b">更换图片</el-dropdown-item>
                <el-dropdown-item command="c">基本信息</el-dropdown-item>

                <el-dropdown-item command="loginOut" divided
                  >注销</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- <el-button type="primary" @click="openMenu(isCollapse)"
          >打开关闭{{ isCollapse }}</el-button
        >-<el-button type="primary" class="ml-2" @click="loginOut"
          >退出登录</el-button
        > -->
        </div>
        <div class="ac-setting-comm">
          <el-icon><BellFilled /></el-icon>
        </div>
      </div>
      
    </div>
    
  </div>
  <div style="width:100%; background:white">
    <head-tab/>
     </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useMessageStore } from '@/stores'
import { ArrowDown } from '@element-plus/icons-vue'

// Hamburger start
import Hamburger from '@/components/Hamburger/index.vue'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import {ref} from "vue";
 
const is_active = ref(false);
const handle_toggle = function () {
  console.log(is_active.value)
  is_active.value = !is_active.value;
};
// Hamburger end

const handleCommand = (command: string | number | object) => {
  ElMessage(`click on item ${command}`)
  if (command == 'loginOut') {
    loginOut()
  }
}
type Props = {
  isCollapse: boolean
}
const props = withDefaults(defineProps<Props>(), {
  isCollapse: false,
})
const store = useMessageStore()

const loginOut = () => {
  ElMessage('退出')
  store.$reset()
  localStorage.removeItem('message')
  router.push('/login')
}

//定义emit
const emit = defineEmits(['clickOpenMenu'])

const openMenu = (isCheck) => {
  console.log('=====', props.isCollapse)
  emit('clickOpenMenu', !props.isCollapse)
}
</script>
<style>
.icon-menu-open {
  height: 60px;
  line-height: 60px;
  color: rgb(22, 22, 22);
  font-size: 23px;
  float: left;
}
.ac-home-text{float: left; margin-top: 20px; margin-left: 16px;}
.ac-setting {
  float: right;
  margin-top: 20px;
  margin-right: 25px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.ac-setting-comm {
  float: right;
  margin-right: 10px;
}
.ac-avatar {
  font-size: 18px;
}
.el-dropdown {
  border: none;
  appearance: none;
  -moz-appearance: none;
  outline: none;
  -webkit-appearance: none;
}
/**input标签聚焦不出现默认边框 */
.el-dropdown :focus {
  outline: none;
}
</style>